import React, {useState, useEffect, memo} from "react";
import {useNavigate, useLocation} from 'react-router-dom'
import {connect} from 'react-redux'
import {Container} from './DetailStyle'
import Scroll from "../../baseUI/scroll";
import * as api from '../../api'
import * as actionTypes from '../shopping/store/actionCreators'
import HeadNumIcon from '../../common/headNumIcon/HeadNumIcon'
import main from '../../assets/images/首页.png'
import shopping from '../../assets/images/购物车.png'

const Detail = (props) => {

  const {setAddCar, selectGoods} = props
  const navigate = useNavigate()
  const [detailList, setDetailList] = useState([])
  const location = useLocation()
  const id = location.pathname.replace(/[^0-9]/ig, "")

  useEffect(() => {
    api.reqDetail().then((res) => {
      setDetailList(res.data.data.detailList)
    })
  }, [])

  // 通过id 匹配对应数据的索引
  const index = detailList.findIndex((item) => item.id === id)

  const onScroll = () => {
    console.log('=====');
  }

  // 执行点击跳转路由到首页
  const gotoMain = () => {
    navigate('/home/main')
  }
  const gotoShopping = () => {
    navigate('/home/shopping')
  }

  const countAmount = () => {
    let subCount = 0
    selectGoods.map((item) => {
      subCount = subCount + item.count
    })
    return subCount
  }

  return (
    <Container>
      <div className="detail">
        <Scroll
          bounceTop={false}
          bounceBottom={false}
          onScroll={
            (e) => {
              console.log(e.y);
            }
          }>
          {
            detailList.length ? (<div>
              <div className="swiperImg">
                <img src={detailList[index].imgUrl2} alt=""/>
              </div>
              <div className="text">
                <div className="price"> ￥{detailList[index].price}</div>
                <div className="title">{detailList[index].name}</div>
                <div className="text1">{detailList[index].text1}</div>
                <div className="text1">{detailList[index].text2}</div>
                <div className="text1">{detailList[index].text3}</div>
              </div>
              <div className="swiperImg">
                <img src={detailList[index].mapping} alt=""/>
              </div>
            </div>) : (<div>55555</div>)
          }
        </Scroll>
      </div>
      <div className="footerbar">
        <div className="icon" onClick={gotoMain}>
          <img src={main} alt=""/>
          <div>首页</div>
        </div>
        <div className="icon" onClick={gotoShopping}>
          <img src={shopping} alt=""/>
          <HeadNumIcon top="92vh" left="22vw" num={countAmount()}/>
          <div>购物车</div>
        </div>
        <div className="button">
          <div className="button1" onClick={setAddCar.bind(null, detailList[index], selectGoods)}>加入购物车</div>
          <div className="button2">立即购买</div>
        </div>
      </div>
    </Container>
  )
}

const mapStateToPorps = (state) => {
  return {
    selectGoods: state.shopping.selectGoods
  }
}

const mapStateToDispatch = (dispatch) => {
  return {
    // 定义，onClick点击使用
    setAddCar(data, selectGoods) {
      if (selectGoods.findIndex((item) => data.id === item.id) === -1) {
        dispatch(actionTypes.getSelectGoods(data))
      } else {
        let index = selectGoods.findIndex((item) => data.id === item.id)
        dispatch(actionTypes.getSelectGoodsCount(data, index))
      }
    }
  }
}

export default connect(mapStateToPorps, mapStateToDispatch)(memo(Detail))
